<template>
    <div class="box">
        <el-table :data="Recorddatas" style="width: 100%;height: 100%;" class="custom-table" 
        :row-style="{
            height: '15px',
            alignItems:'center',
        }">
            <el-table-column prop="batch" label="采收记录批次" width="160" />
            <el-table-column prop="times" label="完成采收时间" width="150" />
            <el-table-column prop="place" label="采收地块" width="100" />
            <el-table-column prop="food" label="采收作物" width="150" />
            <el-table-column prop="weight" label="计划采收量" width="120" />
            <el-table-column prop="people" label="采收人" width="80" />
            <el-table-column label="操作" width="200">
                <template #default="{ row }">
                    <div class="btns">
                    <el-button size="small" type="primary" style="width: 50px;margin: 0;" @click="emits('look', row)">查看</el-button>
                    <el-button size="small" type="primary" style="width: 50px;margin: 0;" @click="emits('edit', row)">编辑</el-button>
                    <el-button size="small" type="primary" style="width: 50px;margin: 0;" @click="emits('delete', row.batch)">删除</el-button>
                    </div>
                </template>
            </el-table-column>

        </el-table>
    </div>
</template>

<script lang='ts' setup>
const props = defineProps(["Recorddatas"])
const emits = defineEmits(['look', 'edit', 'delete'])
</script>

<style lang='scss' scoped>
:deep(.custom-table .el-table__row .el-table__cell) {
    background: #0F2634 !important;
    color: #E0E0E0 !important; // 表格文字颜色
    border-color: #2A6A78 !important; // 单元格边框颜色
}

:deep(.custom-table .el-table__header-wrapper .el-table__header) {
    background: #1A3F4A !important;
    border-color: #2A6A78 !important;

    // 表头容器（强制覆盖）
    .el-table__header-wrapper {
        background: #1A3F4A !important;
    }

    // 表头单元格样式
    th {
        background: #1D4A56 !important;
        color: #eee !important; // 表头文字颜色
        border-color: #2A6A78 !important; // 表头边框颜色
    }
}
.btns{
    display: flex;
    flex-wrap: wrap;
    gap:6px;
}
.box{
    overflow: auto;
}
</style>